import React, { Component } from 'react';
import CouponItem from './CouponItem';
import NoData from '../common/NoData';
import LinkTitle from '../common/LinkTitle';
import { Tabs } from 'antd';
const TabPane = Tabs.TabPane;

export default class Coupon extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: 'all',
      id: null
    };
  }
  componentDidMount() {
    const { location, getList, datasource, filter } = this.props;
    let { activeKey } = this.state;
    if (!datasource) {
      getList({ state: activeKey.toString() });
    } else {
      filter({ state: activeKey.toString() });
    }
  }
  changePane = key => {
    const { filter } = this.props;
    this.setState({
      activeKey: key
    });
    filter({ state: key });
  };
  render() {
    const { activeKey } = this.state;
    const { list } = this.props;
    let pagination = list && list.length > 10 ? true : false;
    let tabs = [
      { tab: '全部', key: 'all' },
      { tab: '可使用', key: '1' },
      { tab: '已过期', key: '0' }
    ];
    return (
      <div className="userCWrapper  myCoupon">
        <div className="ltWrapper">
          <LinkTitle title="我的优惠券" />
        </div>
        <Tabs
          animated={{ inkBar: true, tabPane: false }}
          onChange={key => this.changePane(key)}
          activeKey={activeKey}
        >
          {tabs.map((item, index) => (
            <TabPane tab={item.tab} key={item.key}>
              {list && list.length > 0 ? (
                <ul className="couponList">
                  {list.map((item, index) => (
                    <CouponItem item={item} key={index} />
                  ))}
                </ul>
              ) : (
                <div style={{ marginTop: '4rem' }}>
                  <NoData text="暂无相关优惠券" iconClass="icon-nodata-topic" />
                </div>
              )}
            </TabPane>
          ))}
        </Tabs>
      </div>
    );
  }
}
